<template>
  <div>
    <el-card class="box-card" style="margin:20px;">
      <div slot="header" class="clearfix">
        <div class="tipText">
          <p>注：任职类别划分</p>
          <table border class="table">
            <th>任职类别</th>
            <th>一类</th>
            <th>二类</th>
            <th>三类</th>
            <tr>
              <th>考核优秀</th>
              <td>3</td>
              <td>2</td>
              <td>1</td>
            </tr>
            <tr>
              <th>考核合格</th>
              <td>2</td>
              <td>1.5</td>
              <td>0.5</td>
            </tr>
          </table>

          <p>
            一类：学校、学院、学生会主席团成员；学院团委各部门负责人（创新创业部、组织部、宣传部、办公室、社管会、青年志愿者大队、《童灯》编辑部）；
            校（院）文明督察队队长；广播台台长、记者团团长、艺术团负责人、楼长、班长、团支书、学习委员、班主任助理。
          </p>
          <p>
            二类：各级学生会协助人，副班长、寝室长；各学生社团负责人（正、副社长、会长、团长），记者团副团长、广播站副站长、副楼长和层长、校文明督察队副队长、文娱委员。
          </p>
          <p>
            三类：学生党小组负责人，各级团组织、学生会干事；班委；校院记者团成员、通讯员，艺术团成员，广播台成员，院社团成员，志愿者协会会员、巡逻队员、校文明督察队成员、社区助理。
          </p>
          其他类：余未归入以上类别的学生工作人员可经有关部门根据工作性质和工作量进行比照酌情加分。
          <p>
            备注：①兼任多项职务学生，第二项兼职项考核得分乘以0.4后加入，仅计算2项任职。③有突出表现或重大贡献者可酌情加分。④因工作不到位，或犯严重错误在当学期任职未满的不加分。
          </p>
        </div>
      </div>
      <div>
        <avue-form
          v-if="update"
          ref="form"
          v-model="obj"
          :option="option"
          @reset-change="emptytChange"
        >
          <template slot="menuForm">
            <el-button
              icon="el-icon-edit"
              type="primary"
              @click="submit"
              v-if="butDis"
              >提 交</el-button
            >
            <el-button
              icon="el-icon-edit"
              @click="updateSub"
              type="primary"
              v-else
              >更新</el-button
            >
          </template>
        </avue-form>
      </div>
    </el-card>
  </div>
</template>
<script>
import { baseUrl } from "@/config/env";
import { httpCheck } from "@/api/studentsPage/approval";
import { willHttp } from "@/api/teacherPage/review";

var DIC = {
  VAILD: [
    { label: "一类优秀", value: 10 },
    { label: "一类合格", value: 20 },
    {
      label: "二类优秀",
      value: 30
    },
    { label: "二类合格", value: 40 },
    {
      label: "三类优秀",
      value: 50
    },
    { label: "三类合格", value: 60 }
  ]
};

export default {
  data() {
    return {
      update: true,
      // 控制更新、新增按钮
      butDis: true
    };
  },
  computed: {
    option() {
      return {
        size: "mini",
        mockBtn: false,
        submitBtn: false,
        printBtn: false,
        column: [
          {
            label: "职务名称",
            prop: "jobName",
            type: "input",
            span: 10,
            rules: [
              {
                required: true,
                message: "请输入职务名称",
                trigger: "blur"
              }
            ]
          },
          {
            label: "申报类型",
            prop: "type",
            type: "select",
            dicData: DIC.VAILD,
            span: 10,
            mock: {
              type: "dic"
            },
            rules: [
              {
                required: true,
                message: "请选择申报类型",
                trigger: "blur"
              }
            ]
          },
          {
            label: "申报理由",
            span: 18,
            prop: "adit",
            type: "textarea",
            mock: { type: "textarea" }
          },

         {
            label: "附件上传",
            prop: "imgUrl",

            type: "upload",
            propsHttp: {
              home: baseUrl,
              res: "data"
            },
            props: {
              value: "url",
              label: "name"
            },
            span: 24,
            listType: "picture-card",
            tip: "只能上传jpg/png文件，且不超过500kb",
            action: baseUrl + "/basic/sys-file-log/upload"
          }
        ]
      };
    }
  },
  // mounted() {
  //   this.obj = {};
  // },
  async mounted() {
    let id = this.$route.query.id;
    if (id) {
      await willHttp("jobTask", id).then(res => {
        this.obj.adit = res[0].data.remark;
        this.obj.type = res[0].data.type;
        this.obj.jobName = res[0].data.jobName;
        this.obj.imgUrl = res[0].data.files;
        this.butDis = false;
      });
    }
  },
  methods: {
    // 更新
    updateSub() {
      this.submitParams("update");
    },
    // 提交done
    submit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.submitParams();
        } else {
          return false;
        }
      });
    },
    async submitParams(par) {
      let params = {};
      params.files = this.obj.imgUrl;
      params.remark = this.obj.adit;
      params.type = this.obj.type;
      params.jobName = this.obj.jobName;
      if (par) {
        params.id = this.$route.query.id;

        httpCheck("job", params, "PUT").then(res => {
          if (res.code == 1) {
            this.submitFun(par);
          } else {
            this.reload();
            this.$message.error(res.message);
          }
        });
      } else {
        httpCheck("job", params, "POST").then(res => {
          if (res.code == 1) {
            this.submitFun();
          } else {
            this.reload();
            this.$message.error(res.message);
          }
        });
      }
    },
    submitFun(par) {
      if (par) {
        var arr = [" 更新成功", " 将在3s后自动跳转到申报详情页面"];
      } else {
        arr = [" 提交成功", " 将在3s后自动跳转到申报详情页面"];
      }
      let str = arr.join(" <br/> <br/> ");
      this.$message({
        dangerouslyUseHTMLString: true,
        message: str,
        type: "success"
      });
      setTimeout(() => {
        this.$router.push("/studentsPage");
        this.reload();
        this.emptyChange();
      }, 3000);
    },

    reload() {
      this.update = false;
      this.$nextTick(() => {
        this.update = true;
      });
    },
    // 清空方法
    emptyChange() {
      this.obj = {};
    }
  }
};
</script>
<style lang="less">
.tipText p {
  text-indent: 2em;
}
.tipText {
  border: 1px solid #455;
  height: 200px;
  overflow: auto;
  padding: 25px;
  padding-top: 0;
  font-size: 13px;
  font-weight: 300;
  table {
    width: 100%;
  }
}
</style>
